<template>
<div class="container">
    <div class="title-three">公司档案</div>
    <div class="choise-row">
        <div class="choise-row-left">
            <span class="label">公司名称：</span>
            <el-input v-model="valueDown" placeholder="请输入公司名称"></el-input>
            <el-row>
                <el-button type="query" @click="queryVal">查询</el-button>
                <el-button type="Reset" @click="resetList">重置</el-button>
            </el-row>
        </div>
    </div>
    <!--表格区域开始-->
    <div class="table_main">
        <el-table ref="multipleTable" :data="tableData" :header-cell-style="{background:'#f7f7f7',color:'#1d252a'}" highlight-current-row tooltip-effect="dark" style="width: 100%" border>
            <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
            <el-table-column prop="name" label="公司名称" align="center"></el-table-column>
            <el-table-column prop="jddxCount" label="监督对象" width="310" align="center"></el-table-column>
            <el-table-column prop="jcdxCount" label="监察对象" width="310" align="center"></el-table-column>
            <el-table-column prop="xfjbCount" label="信访举报" width="310" align="center"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="goDetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination_wrap">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="paginationPageSizes" layout="total, prev, pager, next, sizes,jumper" :current-page.sync="paramsJson.pageNum" :page-size="paramsJson.pageSize" :total="paramsJson.total" style="font-weight:400;"></el-pagination>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            //监督对象公司列表请求参数
            paramsJson: {
                name: "",
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },
            paginationPageSizes: [10, 30, 50],
            valueDown: "",
            options: [{
                    value: "",
                    label: "全部",
                },
                {
                    value: 1,
                    label: "待审批",
                },
                {
                    value: 2,
                    label: "待发布",
                },
                {
                    value: 3,
                    label: "被退回",
                },
                {
                    value: 4,
                    label: "已发布",
                },
            ],
            tableData: [],
        };
    },
    mounted() {
        this.pagelist()
        this.companylist()
    },
    methods: {
        pagelist() {
            this.Api.pagelist(this.paramsJson).then((res) => {
                if (res.code == 0) {
                    this.tableData = res.data.records
                    this.paramsJson.total = res.data.total
                }
            })
        },
        companylist() {
            this.Api.companylist(this.paramsJson).then((res) => {
                if (res.code == 0) {
                    this.options = res.data
                }
            })
        },
        queryVal() {
            this.paramsJson.name = this.valueDown.trim()
            this.pagelist()
        },
        resetList() {
            this.valueDown = ''
            this.paramsJson.name = ''
            this.paramsJson.pageNum = 1
            this.paramsJson.pageSize = 10
            this.paramsJson.total = 0
            this.pagelist()
        },
        goDetail(e) {
            // console.log(e);
            this.$router.push({
                name: "Detail",
                query: {
                    id: e.id,
                    name: e.name
                }
            });
        },
        // 分页pageSize 改变触发事件 
        handleSizeChange(val) {
            this.paramsJson.pageSize = val
            this.pagelist()
        },
        // 分页currentPage 改变触发事件
        handleCurrentChange(val) {
            this.paramsJson.pageNum = val
            this.pagelist()
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .title-three {
        width: 100%;
    }

    .choise-row {
        width: 100%;
        height: 36px;
    }

    .table_main {
        width: 100%;
        height: calc(100% - 193px);

        .el-table {
            width: 100%;
            height: 100%;
            overflow: hidden;

            /deep/.el-table__body-wrapper {
                width: 100%;
                height: calc(100% - 48px);
                overflow: auto;
            }
        }
    }
}

// 下拉框样式
.pagination_wrap {
    display: flex;
    justify-content: flex-end;
    bottom: 0;
    right: 0;

    /deep/ .el-pagination {
        margin-top: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        line-height: normal;
    }
}
</style>
